<template>
  <div class="topbar">
    <div class="topbar-left">
      <i class="el-icon-s-unfold fold-icon" :style="iconStyle" @click="toggleSideBar"></i>
    </div>
    <div class="topbar-right">
      <div class="current-user">当前用户：{{ userData.username }}</div>
      <div title="全屏" @click="toggleFullScreen">
        <i class="el-icon-full-screen"></i>
      </div>
      <div title="个人信息" @click="showPopover = !showPopover">
        <el-popover placement="bottom-start" trigger="manual" width="300" v-model="showPopover">
          <h3>用户信息</h3>
          <p>用户名: {{ userData.username }}</p>
          <p>电子邮箱: {{ userData.email }}</p>
          <p>电话号码: {{ userData.phoneNumber }}</p>
          <el-button @click.native="changePasswordVisible = true">修改密码</el-button>
          <!-- <user-info></user-info> -->
          <i class="el-icon-s-custom" slot="reference"></i>
        </el-popover>
      </div>
      <div title="退出登录" @click="logout">
        <i class="el-icon-switch-button"></i>
      </div>
    </div>
    <!-- 修改密码弹出框 -->
    <el-dialog title="修改密码" :visible="changePasswordVisible" width="500px" :show-close="false">
      <el-form
        ref="changePasswordForm"
        :model="changePasswordForm"
        :rules="rules"
        hide-required-asterisk
      >
        <el-form-item prop="password" label="原密码">
          <el-input show-password v-model="changePasswordForm.password" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input show-password v-model="changePasswordForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changePasswordVisible = false; showPopover=false">取消</el-button>
        <el-button
          type="primary"
          @click="changePassword('changePasswordForm'); showPopover=false"
          :loading="isLoading"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import screenfull from "@/assets/libs/screenfull.js";

export default {
  data() {
    return {
      userData: {
        username: "",
        email: "",
        phoneNumber: "",
        // loginTime: "", // 登录时间
      },
      isFullscreen: false,
      changePasswordVisible: false,
      isLoading: false,
      showPopover: false,
      changePasswordForm: {
        username: this.$store.state.userData.username,
        password: "",
        newPassword: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在6-20个字符之间", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
    iconStyle() {
      return {
        transform: this.isCollapse ? "rotate(0deg)" : "rotate(180deg)",
      };
    },
    currentUsername() {
      return this.userData.username;
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.commit("toggleSideBar");
    },
    toggleFullScreen() {
      if (!screenfull.enabled) {
        this.$message.warning("您的浏览器不支持全屏");
        return false;
      }
      screenfull.toggle();
      // isFullscreen 是反的
      this.isFullscreen = !screenfull.isFullscreen;
    },
    logout() {
      this.$confirm("你确定要退出吗？", "退出确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 此处进行用户退出操作
        this.$store.commit("logout");
        this.$router.push("/loginPage/login");
      });
    },
    changePassword(formName) {
      // console.log(this.currentUsername);
      console.log(this.changePasswordForm);
      this.isLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("/changePassword", JSON.stringify(this.changePasswordForm))
            .then((response) => {
              this.isLoading = false;
              // console.log(response)
              if (response.status === 200) {
                this.changePasswordVisible = false;
                this.$store.commit("logout"); // 用户退出
                this.$router.push("/loginPage/login");
                this.$message.success("密码修改成功，请重新登录");
              } else {
                this.$message.error("原密码错误，修改失败");
              }
            })
            .catch((error) => {
              // 其他异常，如服务器未启动
              console.error(error);
              this.isLoading = false;
              this.$message.error("修改失败");
            });
        } else {
          // 输入不合法
          this.isLoading = false;
          // console.log('error submit!!')
          return false;
        }
      });
    },
  },
  created() {
    this.userData = this.$store.state.userData;
  },
};
</script>

<style scoped>
.topbar {
  background-color: #fff;
  font-size: 20px;
  height: 60px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.current-user {
  font-size: 15px;
  /* border-right: 3px solid #F4F7Fa; */
}

.topbar-right {
  display: flex;
  flex-flow: row nowrap;
  line-height: 60px;
}

.topbar-right div {
  padding: 0 23px;
}

.topbar-right div:nth-of-type(n + 2):hover {
  background-color: aliceblue;
  cursor: pointer;
}

.topbar-left:hover {
  cursor: pointer;
}

.fold-icon:hover {
  cursor: pointer;
}

.fold-icon {
  font-size: 25px;
  padding: 0 20px;
  transition: all 0.5s;
}
</style>